<template>
	<div class="system_user_tree">
		<el-input prefix-icon="el-icon-search" placeholder="输入关键字进行过滤" clearable v-model="filterText" />
		<el-tree v-bind="treeConfig" :data="departTree" @node-click="handleDepartTree"></el-tree>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		value: { type: String, default: '' }
	},
	data() {
		return {
			selected: this.value,
			treeConfig: {
				ref: 'tree',
				nodeKey: 'id',
				defaultExpandAll: true,
				highlightCurrent: true,
				expandOnClickNode: false,
				filterNodeMethod: this.handleFilterNode,
				props: { label: 'name', children: 'childList' }
			},
			filterText: ''
		};
	},
	computed: {
		...mapGetters(['departTree'])
	},
	watch: {
		value(val) {
			this.selected = val;
		},
		selected(val) {
			this.$emit('input', val);
		},
		filterText(val) {
			this.$refs['tree'].filter(val);
		}
	},
	methods: {
		//筛选文件
		handleFilterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},

		handleDepartTree(data, node) {
			if (!!this.selected && this.selected === data.id) {
				this.$nextTick(() => {
					this.selected = '';
					this.$refs['tree'].setCurrentKey(null);
				});
			} else {
				this.selected = data.id;
			}
			this.$emit('selected');
		}
	}
};
</script>

<style lang="scss" scoped>
:deep(.system_user_tree) {
	display: flex;
	flex-direction: column;
	border-right: solid 1px #ebeef5;
	min-width: 225px;
	overflow: hidden;
	width: 18%;
	.el-tree {
		flex: 1;
		overflow: auto;
	}
	.el-input__inner {
		border: none;
		font-size: 15px;
		border-radius: 0;
		border-bottom: solid 1px #ebeef5;
	}
	.el-tree-node__content {
		height: 36px;
	}
	.el-tree-node__label {
		font-size: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}
</style>
